import React from 'react';
import PlayIcon from '../icons/PlayIcon';
import PauseIcon from '../icons/PauseIcon';
import { useAudioStore } from '@/lib/audioManager';

interface AudioButtonProps {
  onClick: () => void;
  isEnabled: boolean;
  isCurrentlyPlaying: boolean;
  variant?: 'primary' | 'secondary';
}

const AudioButton: React.FC<AudioButtonProps> = ({ 
  onClick, 
  isEnabled,
  isCurrentlyPlaying,
  variant = 'primary'
}) => {
  const { isPlaying } = useAudioStore();

  const getButtonStyles = () => {
    if (!isEnabled) {
      return 'text-gray-300 cursor-not-allowed';
    }

    if (variant === 'primary') {
      return isCurrentlyPlaying && isPlaying
        ? 'bg-blue-100/70 text-blue-600 hover:bg-blue-200/70'
        : 'hover:bg-blue-100/70 text-gray-600 hover:text-blue-600';
    }

    return isCurrentlyPlaying && isPlaying
      ? 'bg-green-100/70 text-green-600 hover:bg-green-200/70'
      : 'hover:bg-green-100/70 text-gray-600 hover:text-green-600';
  };

  return (
    <button 
      onClick={onClick}
      disabled={!isEnabled}
      className={`p-1.5 rounded-full transition-all duration-200 ${getButtonStyles()}`}
      title={isCurrentlyPlaying && isPlaying ? '暂停' : '播放'}
    >
      {isCurrentlyPlaying && isPlaying ? (
        <PauseIcon className="w-5 h-5" />
      ) : (
        <PlayIcon className="w-5 h-5" />
      )}
    </button>
  );
};

export default AudioButton;